<template>
	<view>
		<!-- #ifdef MP-WEIXIN || MP-QQ -->
		<!--标题栏-->
		<np-navbar ref="navBar" :scrollTop="scrollTop" type="transparentFixed">商品详情</np-navbar>
		<!-- #endif -->
		<block v-if="show && globalConfig.wechat_mod == 1">
			<block v-if="goods.coupon_on">
				<!--轮播图-->
				<goods-adv :bannerList="bannerList" :video="goods.video"></goods-adv>
				<!--基本信息-->
				<goods-info :goods="goods" :api="api" :recommend="recommendList" @click="buyNow"></goods-info>
				<!--图片详情-->
				<view class="margin-top np-goods-details-box" v-if="detail">
					<image v-for="(item,index) in detail" :key="index" :src="item" mode="widthFix" />
				</view>
			</block>
			<block v-if="goods.coupon_on == 0">
				<np-empty info="来晚了,已经抢光了"></np-empty>
			</block>
			<!--相似推荐-->
			<np-div :size="28" :bold="true" color="#333" width="50%">为你推荐</np-div>
			<np-list-two :goodsList="goodsList" :api="api"></np-list-two>
			<!--占位底部距离-->
			<view class="footer-tabbar-height" />
			<goods-footer :api="api" :fav="fav" :quan="goods.coupon_quan" @share="toShare" @fav="toFav" @buynow="buyNow"></goods-footer>
		</block>
		
		<np-empty v-if="globalConfig.wechat_mod == 0" info="功能下架"></np-empty>

		<np-loading v-if="!show" isFullScreen active text="加载中..." color="#39b54a"></np-loading>
		<!--登录提示-->
		<np-login-toast ref="showLogin"></np-login-toast>
		<!-- 分享 -->
		<uni-popup ref="footerShare" type="share">
			<goods-share title="分享" @select="select"></goods-share>
		</uni-popup>
		<!-- 领取提示 -->
		<uni-popup ref="copytip" type="center" :animation="true">
			<view class="np-copy-tip">
				<view class="np-tip-header">
					<text class="np-header-icon npIcon-success"></text>
				</view>
				<view class="np-tip-title">领取成功</view>
				<view class="np-tip-text">
					<text>{{linkInfo ? linkInfo.tip : ''}}</text>
				</view>
			</view>
		</uni-popup>
		<!-- #ifdef H5 -->
		<uni-popup ref="codeBox" type="center" :animation="true">
			<view class="np-code-box">
				<view class="np-code-title">口令信息</view>
				<text class="np-code-text">{{linkInfo.taoword}}</text>
				<view class="code-btn" @click="webCopy">复制领取</view>
			</view>
		</uni-popup>
		<!-- #endif -->
		<!-- 生成海报 -->
		<goods-canvas v-if="startCanvas" :api="api" :goodsInfo="goods" :link="userShareLink" @close="closeGoodsCanvas"></goods-canvas>
	</view>
</template>

<script>
	import base from '@/common/base.js';
	import tlj from '@/common/tlj.js'
	import goodsAdv from './components/goods-adv.vue'
	import goodsInfo from './components/goods-info.vue'
	import goodsFooter from './components/footer.vue'
	import goodsCanvas from './components/goods-canvas.vue'
	import goodsShare from './components/np-share.vue'
	export default {
		mixins: [base, tlj],
		components: {
			goodsAdv,
			goodsInfo,
			goodsFooter,
			goodsShare,
			goodsCanvas,
		},
		data() {
			return {
				api: 'ali'
			}
		},
		methods: {
			gotoshare() {
				this.$refs.shareshare.toggleMask();
			},
		}
	}
</script>

<style lang="scss">
	.np-goods-details-box {
		position: relative;
		width: 100%;

		image {
			width: 100%;
		}
	}

	.goods-canvas {
		position: relative;
		padding: 10rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.footer-tabbar-height {
		min-height: 100upx;
		height: calc(100upx + env(safe-area-inset-bottom) / 2);
	}

	.np-code-box {
		width: 550rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 20rpx 50rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		font-size: 24rpx;
		overflow: hidden;
		z-index: 99;
	}

	.np-code-title {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 40rpx;
		font-weight: bold;
		background-image: linear-gradient(45deg, #ff9700, #ed1c24);
		color: #FFFFFF;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	.np-code-text {
		margin-top: 110rpx;
	}

	.code-btn {
		width: 60%;
		margin-top: 50rpx;
		height: 88rpx;
		border-radius: 50rpx;
		background-color: #ff5500;
		text-align: center;
		line-height: 88rpx;
		color: white;
		font-size: 30rpx;
		box-shadow: 0rpx 5rpx 10rpx #a2a2a2;
	}

	.np-copy-tip {
		width: 550rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
	}

	.np-tip-header {
		padding: 20rpx;
	}

	.np-header-icon {
		font-size: 160rpx;
		color: #1afa29;
	}

	.np-tip-title {
		padding: 0 20rpx 20rpx 20rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.np-tip-text {
		padding: 20rpx;
		font-size: 20rpx;
		color: #777777;
	}
</style>
